<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="Probably the most complete UI kit out there. Multiple functionalities and controls added, extended color palette and beautiful typography, designed as its own extended version of Bootstrap at the highest level of quality.">
    <meta name="author" content="Webpixels">
    <title>Boomerang UI Kit - Free Bootstrap Framework by Webpixels</title>
    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700,800|Roboto:400,500,700" rel="stylesheet">
    <!-- Theme CSS -->
    <link type="text/css" href="boomerang-free-bootstrap-ui-kit-master/assets/css/theme.css" rel="stylesheet">
    <!-- Demo CSS - No need to use these in your project -->
    <link type="text/css" href="boomerang-free-bootstrap-ui-kit-master/assets/css/demo.css" rel="stylesheet">
    <script src="boomerang-free-bootstrap-ui-kit-master/assets/vendor/jquery/jquery.min.js"></script>
    <!-- 校验 -->
    <script>
        $(document).ready(function() {
            // 账号校验
            function checkUsername() {
                var usernameRegular = /^[a-zA-Z0-9]{5,10}$/;
                var userName = $("#input_email").val().trim();
                var userNameMsg = $("#userNameMsg");
                userNameMsg.text("").hide();
                if (userName !== "") {
                    if (!usernameRegular.test(userName)) {
                        userNameMsg.text("账号格式是5-10位大小写字母或者数字").show();
                        return false;
                    } else {
                        userNameMsg.text("OK").show();
                        return true;
                    }
                }
                return false; // 当输入为空时，返回false表示验证失败
            }

            // 密码校验
            function checkUserPwd() {
                var userPwdRegular = /^[0-9]{6}$/;
                var userPwd = $("#input_password").val().trim();
                var userPwdMsg = $("#userPwdMsg");
                userPwdMsg.text("").hide();
                if (userPwd !== "") {
                    if (!userPwdRegular.test(userPwd)) {
                        userPwdMsg.text("密码格式是6位数字").show();
                        return false;
                    } else {
                        userPwdMsg.text("OK").show();
                        return true;
                    }
                }
                return false; // 当输入为空时，返回false表示验证失败
            }

            // 表单提交校验
            $("#loginForm").submit(function(event) {
                event.preventDefault();
                var f1 = checkUsername();
                var f2 = checkUserPwd();
                if (f1 && f2) {
                    $.ajax({
                        url: "/bookstore/user/userLogin",
                        type: "POST",
                        data: {
                            user: $("#input_email").val(),
                            pass: $("#input_password").val(),
                            code: $("#input_authcode").val()
                        },
                        success: function(response) {
                            if (response && typeof response.success !== 'undefined') {
                                if (response.success) {
                                    alert("登录成功!");
                                    window.location.href = "/bookstore/user/shopping"; // 修改这里以匹配ShoppingServlet的URL模式
                                }
                                 else {
                                    var errorMessage = response.message || "未知错误";
                                    if (errorMessage.includes("用户名不存在")) {
                                        $("#userNameMsg").text("用户名不存在,请注册或检查输入").show();
                                    } else if (errorMessage.includes("密码错误")) {
                                        $("#userPwdMsg").text("密码错误,请重试").show();
                                    } else if (errorMessage.includes("验证码错误")) {
                                        alert("验证码错误,请重新输入并点击图片刷新验证码");
                                        $("#input_authcode").val("").focus();
                                        refreshAuthCode(); // 刷新验证码
                                    } else {
                                        alert("登录失败: " + errorMessage);
                                    }
                                }
                            } else {
                                console.error("服务器响应格式不正确:", response);
                                alert("登录失败,服务器响应格式不正确");
                            }
                        },
                        error: function(xhr, status, error) {
                            var responseText = xhr.responseText;
                            try {
                                var response = JSON.parse(responseText);
                                if (response && typeof response.success !== 'undefined' && !response.success) {
                                    console.log("Processing error as success with error message:", response);
                                    return; // 处理错误
                                }
                            } catch (e) {
                                // 如果无法解析为JSON,则视为真正的错误
                            }
                            var errorMessage = xhr.status + ' ' + xhr.statusText + ': ' + responseText;
                            console.error("Login failed:", errorMessage);
                            alert("登录请求失败,请重试");
                        }
                    });
                } else {
                    console.log("表单验证失败，无法提交");
                }
            });

            // 当用户离开输入框时也进行验证
            $("#input_email, #input_password").on("blur", function() {
                if ($(this).attr("id") === "input_email") {
                    checkUsername();
                } else {
                    checkUserPwd();
                }
            });

            // 刷新验证码
            function refreshAuthCode() {
                document.getElementById("authCodeImg").src = "/bookstore/authcode?" + new Date().getTime();
            }

            // 绑定验证码图片点击事件以刷新验证码
            $("#authCodeImg").on("click", refreshAuthCode);
        });
    </script>
</head>
  <body>
  <nav class="navbar navbar-expand-lg navbar-transparent navbar-dark bg-dark py-4">
    <div class="container">
      <span class="navbar-brand">SWU BOOKSTORE</span>
      <a class="navbar-brand" href="./admin.html" style="font-size:20px;border: 1.5px solid transparent; border-image: linear-gradient(to right, lightgray, #288cff) 1; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);">后台管理入口</a>
      <button class="navbar-toggler" type="button" data-action="offcanvas-open" data-target="#navbar_main" aria-controls="navbar_main" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
    </div>
  </nav>
  <main class="main">
    <section class="py-xl bg-cover bg-size--cover" style="background-image: url('../assets/images/backgrounds/img-1.jpg')">
      <span class="mask bg-primary alpha-6"></span>
      <div class="container d-flex align-items-center no-padding">
        <div class="col">
          <div class="row justify-content-center">
            <div class="col-lg-4">
              <div class="card bg-primary text-white">
                <div class="card-body">
                  <button type="button" class="btn btn-primary btn-nobg btn-zoom--hover mb-5">
                    <span class="btn-inner--icon"><i class="fas fa-arrow-left"></i></span>
                  </button>
                  <span class="clearfix"></span>
                  <img src="boomerang-free-bootstrap-ui-kit-master/assets/images/brand/icon.png" style="width: 50px;">
                  <h4 class="heading h3 text-white pt-3 pb-5">欢迎访问西南大学网上书店<br>
                  </h4>
                  <form class="form-primary" id="loginForm" action="">
                    <div class="form-group">
                      <input type="text" class="form-control" id="input_email" placeholder="请输入账号" required>
                      <span id="userNameMsg" style="color: red; display: none;"></span>
                    </div>
                    <div class="form-group">
                      <input type="password" class="form-control" id="input_password" placeholder="请输入密码" required>
                      <span id="userPwdMsg" style="color: red; display: none;"></span>
                    </div>
                    <div class="form-group">
                      <input type="text" class="form-control" id="input_authcode" placeholder="请输入验证码" required>
                      <img id="authCodeImg" src="/bookstore/authcode" alt="验证码" onclick="refreshAuthCode()" style="cursor: pointer; margin-top: 10px; margin-left: auto; width: 140px; height: 43px;">
                    </div>
                    <div class="text-right mt-4"><a href="#" class="text-white">忘记密码</a></div>
                    <button type="submit" class="btn btn-block btn-lg bg-white mt-4">登录</button>
                    <button type="button" class="btn btn-block btn-lg bg-white mt-4" onclick="window.location.href='./register.html'">注册</button>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </main>
    <footer class="pt-5 pb-3 footer  footer-dark bg-tertiary">
      <div class="container">
        <div class="row">
          <div class="col-12 col-md-4">
            <div class="pr-lg-5">
              <h1 class="heading h6 text-uppercase font-weight-700 mb-3"><strong>SWU</strong> BOOKSTORE</h1>
              <p>本网站是由计算机与信息科学学院 软件学院本科生开发。本页面是西南大学网上书店面向顾客的前端部分，能展示后端各种图书的信息，并实现部分功能。若想查看后端部分，点击后台管理将重定向到后端部分的页面。</p>
            </div>
          </div>
          <div class="col-6 col-md">
            <h5 class="heading h6 text-uppercase font-weight-700 mb-3">购物指南</h5>
            <ul class="list-unstyled text-small">
              <li><a class="text-muted" href="ShoppingProcess.html">购物流程</a></li>
              <li><a class="text-muted" href="#">会员介绍</a></li>
              <li><a class="text-muted" href="#">常见问题</a></li>
              <li><a class="text-muted" href="#">联系客服</a></li>
            </ul>
          </div>
          <div class="col-6 col-md">
            <h5 class="heading h6 text-uppercase font-weight-700 mb-3">支付方式</h5>
            <ul class="list-unstyled text-small">
              <li><a class="text-muted" href="#">货到付款</a></li>
              <li><a class="text-muted" href="#">在线支付</a></li>
              <li><a class="text-muted" href="#">分期付款</a></li>
            </ul>
          </div>
          <div class="col-6 col-md">
            <h5 class="heading h6 text-uppercase font-weight-700 mb-3">售后服务</h5>
            <ul class="list-unstyled text-small">
              <li><a class="text-muted" href="#">售后政策</a></li>
              <li><a class="text-muted" href="#">价格保护</a></li>
              <li><a class="text-muted" href="#">退款说明</a></li>
              <li><a class="text-muted" href="#">取消订单</a></li>
            </ul>
          </div>
          <div class="col-6 col-md">
            <h5 class="heading h6 text-uppercase font-weight-700 mb-3">关于</h5>
            <ul class="list-unstyled text-small">
              <li><a class="text-muted" href="#">关于我们</a></li>
              <li><a class="text-muted" href="#">联系我们</a></li>
              <li><a class="text-muted" href="#">隐私政策</a></li>
            </ul>
          </div>
        </div>
        <hr>
        <div class="d-flex align-items-center">
          <span class="">
            &copy; 2018 <a href="https://webpixels.io/" class="footer-link" target="_blank">Webpixels</a>. All rights reserved.
          </span>
          <ul class="nav ml-lg-auto">
            <li class="nav-item">
              <a class="nav-link active" href="https://instagram.com/webpixelsofficial" target="_blank"><i class="fab fa-instagram"></i></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://facebook.com/webpixels" target="_blank"><i class="fab fa-facebook"></i></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://github.com/webpixels" target="_blank"><i class="fab fa-github"></i></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="https://dribbble.com/webpixels" target="_blank"><i class="fab fa-dribbble"></i></a>
            </li>
          </ul>
        </div>
      </div>
    </footer>
    <!-- Core -->
    <script src="boomerang-free-bootstrap-ui-kit-master/assets/vendor/jquery/jquery.min.js"></script>
    <script src="boomerang-free-bootstrap-ui-kit-master/assets/vendor/popper/popper.min.js"></script>
    <script src="boomerang-free-bootstrap-ui-kit-master/assets/js/bootstrap/bootstrap.min.js"></script>
    <!-- FontAwesome 5 -->
    <script src="boomerang-free-bootstrap-ui-kit-master/assets/vendor/fontawesome/js/fontawesome-all.min.js" defer></script>
    <!-- Page plugins -->
    <script src="boomerang-free-bootstrap-ui-kit-master/assets/vendor/bootstrap-select/js/bootstrap-select.min.js"></script>
    <script src="boomerang-free-bootstrap-ui-kit-master/assets/vendor/bootstrap-tagsinput/bootstrap-tagsinput.min.js"></script>
    <script src="boomerang-free-bootstrap-ui-kit-master/assets/vendor/input-mask/input-mask.min.js"></script>
    <script src="boomerang-free-bootstrap-ui-kit-master/assets/vendor/nouislider/js/nouislider.min.js"></script>
    <script src="boomerang-free-bootstrap-ui-kit-master/assets/vendor/textarea-autosize/textarea-autosize.min.js"></script>
    <!-- Theme JS -->
    <script src="boomerang-free-bootstrap-ui-kit-master/assets/js/theme.js"></script>


  </body>
</html>
